window.addEvent ('domready', function () {
	
	// Variables de Drags y Drops
	var $drags = $$('#drags div');
	var $drops = $$('#drops div ');
	
	// Creamos objeto tipo Drag and Drop Basico
	miDxD = new DxD ($drags, $drops, {
		container: $('content'),
		dragDelete: true,
		sendToBack: 'ini',
		cssClass: 'miDxD',
		adjDrags: [
			{ x: 10, y: 400 },
			{ x: 210, y: 400 },
			{ x: 410, y: 400 },
			{ x: 610, y: 400 },
		],
		adjDrops: [
			{ x: 10, y: 100 },
			{ x: 210, y: 100 },
			{ x: 410, y: 100 },
			{ x: 610, y: 100 },
		],
		optionsDrag: {
			modifiers: {
				x: 'left',
				y: 'top'
			}
		}
	});
	
	miDxD.elDrops.each (function ($objDrop, $iHD) {

		$objDrop.node.set ('html',
			'<p>pos.left: <b>'+$objDrop.value.left+'</b><p>' + 
			'<p>pos.top: <b>'+$objDrop.value.top+'</b><p>' + '<br />' + 

			'<p>pos.right: <b>'+$objDrop.value.right+'</b><p>' + 
			'<p>pos.bottom: <b>'+$objDrop.value.bottom+'</b><p>' + '<br />'
		);

		
		$objDrop.node.addEvents ({
			'mousedown': function () {
				console.debug (miDxD.elDrops[$iHD]);
			}
		});
	});

	miDxD.addEvent ('drag', function ($objDrag) {
		$('dragInfo').set ('html',
			'<p>value.now.x: <b>'+$objDrag.value.now.x+'</b><p>' + 
			'<p>value.now.y <b>'+$objDrag.value.now.y+'</b><p>' + '<br />' + 

			'<p>.value.abs.x: <b>'+$objDrag.value.abs.x+'</b><p>' + 
			'<p>.value.abs.y <b>'+$objDrag.value.abs.y+'</b><p>' + '<br />' +

			'<p>mouse.now.x: <b>'+$objDrag.mouse.now.x+'</b><p>' + 
			'<p>mouse.now.y <b>'+$objDrag.mouse.now.y+'</b><p>' + '<br />'
		);
	});
});
